<template>
	<view class="comp-box" style="padding-bottom: 150rpx;">
		<!-- 客户案例 -->
		<view class="title-box u-flex u-row-between">
			<text class="title-text">客户案例</text>
		</view>
		
		<view class="part2-con" style="position: relative;padding: 0 10rpx;">
			<view class="isshow u-flex u-row-between"  >
				<text>是否展示客户案例</text>
				<switch :checked="isShowItem" @change="isShowItem = !isShowItem" color="rgba(29, 168, 254, 1)" style="transform: scale(0.8);"></switch>
			</view>
			<view class="type-all" style="padding-bottom: 60rpx;">
				<view class="type-name u-flex"
					style="background-color: rgba(242, 242, 242, 1);border-radius: 24rpx 24rpx 0rpx 0rpx;padding: 0 12rpx;">
					<text style="line-height: 120rpx;font-size: 32rpx;font-weight: bold;">理由描述</text>
					<view @click="$refs['inputPop'].open()" class="u-flex u-flex-1"
						style="background-color: #FFFFFF;margin-left: 20rpx; border-radius: 20rpx;">
						<input style="background-color: #FFFFFF;height: 64rpx;flex: 1;"
							 type="text" value=""
							v-model="subName" placeholder="请输入理由描述" />
						<text
							class="num-text">（{{compInfo.useCase[0] && compInfo.useCase[0].subtitle && compInfo.useCase[0].subtitle.length || 0}}/{{maxlength}}）</text>
					</view>
				</view>
			<view class="part4-con" style="margin-bottom: 20rpx;position: relative;" @click="caseIndex = index"
				v-for="(item,index) in compInfo.useCase" :key="index">
				
				<view class="img-con" @click="caseIndex = index">
					<u-upload :showProgress="false" @on-uploaded="uploadSuccessCase"
						:action="`https://job.ydylmold.cn/base/upload/file`"
						:formData="{fileCode:138,fileType:100,fileParaName:'file'}" width="620rpx" height="280rpx"
						:fileList="item.fileList" maxCount="1">
					</u-upload>
				</view>
				<view class="form">
					<view class="form-item">
						<view class="form-title">
							<text>案例标题</text>
							<text class="num-text">（{{item.productName && item.productName.length || 0}}/32）</text>
						</view>
						<view class="form-right u-flex">
							<input :adjust-position="false" v-model="item.productName"  type="text"
								value="" placeholder="请输入" />
						</view>
					</view>
					<view class="form-item">
						<view class="form-title">
							<text>案例描述</text>
							<text class="num-text">({{item.remarks && item.remarks.length || 0}}/300)</text>
						</view>
						<view class="form-right u-flex">
							<textarea :adjust-position="false" class="textarea" value="" v-model="item.remarks"
								placeholder="请输入" maxlength="300" />
						</view>
					</view>
				</view>
				<view class="u-flex" @click="delCase(item,index)">
					<u-image width="22rpx" height="26rpx" src="https://job.ydylmold.cn/mingpian/image/editImg/del1.png"></u-image>
					<text class="u-m-x-12 del-text">删除该案例</text>
				</view>
			</view>
					
			</view>
			
		</view>
		<view class="fix-btn"
			style="z-index: 999;position: fixed;bottom: 0;right: 0;padding: 0rpx 24rpx 10rpx 24rpx;width: 100%;background-color: #FFFFFF;">
			<button type="primary" @click="$u.throttle(saveItem, 2000)"
				style=" background-color: rgba(29, 168, 254, 1);margin-top: 20rpx;border-radius: 48rpx;">保存</button>
		</view>
		<view class="fix-add u-flex u-row-center u-col-center" @click="addCase">
			<u-image width="40rpx" height="40rpx" src="https://job.ydylmold.cn/mingpian/image/editImg/add-img.png"></u-image>
		</view>
	</view>
</template>

<script>
	import {
		queryUsrCompanyStationList,
		insertCompanyStation,
		deleteUsrCompanyStationById
	} from '@/common/api/auth.js'
	import upVideo from '@/utils/uploadVideo.js'
	import {
		getToken
	} from '@/utils/token.js'
	import {
		uploadFilePromise
	} from '@/utils/upload.js'
	export default {
		data() {
			return {
				compInfo: {
					useCase: [{
						imgName: '',
						remarks: '',
						stationType: 5,
						productName: '',
						moduleNo: "ydylapp1003",
						companyId: getToken('useNum'),
						stationId: '',
						sendImg: []
					}], //客户案例
				},
				caseIndex: 0,
				caseSave: true,
				showBtn: true,
				isShowItem:false,
				maxlength:130,
				subName:''
			}
		},
		onLoad: function() {
			this.init()
		},
		
		methods: {
			//添加客户案例
			addCase() {
				this.checkSave(5)
				if (this.caseSave) {
					this.compInfo.useCase.push({
						imgName: '',
						remarks: '',
						stationType: 5,
						productName: '',
						moduleNo: "ydylapp1003",
						companyId: getToken('useNum'),
						stationId: '',
						sendImg: []
					})
					setTimeout(()=>{
						uni.pageScrollTo({
							scrollTop:9999999999999,
							duration:300
						})
					},300)
					
				}
			},
			delCase(item, index) {
				uni.showModal({
					title:'提示',
					content: '您确定要删除第' + (index + 1) + '个客户案例吗？',
					success: (e) => {
						if (e.confirm) {
							if (item.stationId) {
								deleteUsrCompanyStationById({
									stationId: item.stationId
								}).then(res => {
									if (res.data && res.data.code == 1) {
										this.$u.toast(res.data.msg || res.data.message || '删除成功')
										this.compInfo.useCase.splice(index, 1)
									} else {
										this.$u.toast(res.data.msg || res.data.message || '删除失败')
									}
									this.$store.commit('isFresh', true)
								})
							} else {
								this.compInfo.useCase.splice(index, 1)
							}
						}
					}
				})
			},
			//案例图片上传成功
			uploadSuccessCase(e) {
				let acArr = this.compInfo.useCase
				acArr[this.caseIndex].sendImg = this.getImgArr(e)
				this.compInfo.useCase = acArr
			},
			getImgArr(data) {
				let arrImg = []
				let arr = []
				data.forEach(v => {
					if (v.url && !v.response) {
						arr = v.url.split('/')
						arrImg.push(arr[arr.length - 1])
					} else {
						arrImg.push(v.response.data)
					}
				})
				return arrImg
			},
			// 初始化数据
			async init() {
				let res = await this.queryUsrCompanyStationList()
				if (res.data && res.data.code == 1) {
					let acInfo = {}
					// 数组分类
					let data = res.data && res.data.listData
					let arrAll = data.filter(m => {
						return m.stationId != ''
					})
					if(arrAll && arrAll.length){
						this.compInfo.useCase = []
						this.isShowItem = arrAll[0].state == 1?true:false
						arrAll && arrAll.forEach(m => {
							m.imgName ? m.fileList = [{
								'url': 'https://www.ydylmold.cn/images/ydylapp/usrCompanyStation/applicationsImage/' +
									m.imgName
							}] : m.fileList = []
							m.sendImg = m.imgName && m.imgName.split(',')
							this.compInfo.useCase.push(m)
						})
					}
					this.subName = this.compInfo && this.compInfo.useCase && this.compInfo.useCase[0] && this.compInfo.useCase[0].subtitle || ''
					
				}
			},
			//公司更多数据详情
			queryUsrCompanyStationList() {
				return queryUsrCompanyStationList({
					companyNo: getToken('useNum'),
					stationType: 5
				})
			},
			saveItem() {
				let params = {}
				this.checkSave()
				if (this.caseSave) {
					let arr = []
					let sendArr = []
					this.compInfo.useCase.forEach((item, index) => {
						sendArr.push({
							updateImage: item.sendImg && item.sendImg.join(','),
							stationId: item.stationId || '',
							companyId: item.companyId || getToken('useNum'),
							moduleNo: 'ydylapp1003',
							stationType: item.stationType || 5,
							productName: item.productName || '',
							remarks: item.remarks || '',
							subtitle:this.subName,
							state:this.isShowItem?1:0
						})
					})
					params.jsonData = JSON.stringify(sendArr)
					this.editFun(params)
				}
			},
			editFun(params) {
				insertCompanyStation(params).then(res => {
					if (res.data && res.data.code == 1) {
						uni.hideLoading()
						this.$u.toast('保存成功')
						setTimeout(()=>{
							uni.navigateBack()
						},500)
						this.$store.commit('isFresh', true)
					} else {
						this.$u.toast('保存失败')
					}
				})
			},

			checkSave() {
				this.caseSave = true
				this.compInfo.useCase.forEach((m, i) => {
					if (m.sendImg && m.sendImg.length == 0) {
						this.$u.toast('第' + (i + 1) + '个案例,图片未上传')
						this.caseSave = false
					}
					if (!m.productName) {
						this.$u.toast('第' + (i + 1) + '个案例,标题未填')
						this.caseSave = false
					}
					if (!m.remarks) {
						this.$u.toast('第' + (i + 1) + '个案例,描述未填')
						this.caseSave = false
					}
				})

			},

		}
	}
</script>

<style lang="scss">
	@import "./css/edit.scss";
</style>
